<template>
    <div>
        <div class="footer-nav container-fluid text-center footerImg d-flex align-items-center">
            <div class="container d-flex flex-column">
                <div class="row d-flex justify-content-between">
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="footer-logo">
                            <img src="../assets/images/logo2.png" alt="">
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="footer-text">
                            猫咪领养？ 商品购买还是其他？给我们发电子邮件
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="footer-email d-flex align-items-center gap-3 mb-2">
                            <font-awesome-icon :icon="['fas', 'envelope']" style="color: rgba(254,161,22,1);" /> 
                            <span>Info@gmail.com</span>
                        </div>
                        <div class="footer-phone d-flex align-items-center gap-3">
                            <font-awesome-icon :icon="['fas', 'phone']" style="color: rgba(254,161,22,1);" /> 
                            <span>+(202) 555-0178</span>
                        </div>
                    </div>
                  </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: "FooterNav",
  methods: {

  }
}
</script>


<style scoped>
.footerImg {
  width: 100%;
  height: 353px;
  background-image: url('../assets/images/footerbg.png');
  background-color: rgba(252,157,41);
  background-repeat: no-repeat;
  /* 确保图片覆盖整个容器 */
  background-position: center;
  /* 图片居中 */
  position: relative;
    /* padding: 60px 0 30px; */
  background-size: cover;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.footer-logo img{
    width: 115px;
    height:57px;
}
.text-left {
  text-align: left;
}
.footer-text{
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 25px;
    line-height: 28px;
    text-align: left;
}
.footerImg span{
    display: block;
    color: #f8f9fe;
    font-size: 13px;
    font-weight: 600;
    /* margin-bottom: 10px; */
    letter-spacing: 0.5px;
}
</style>